﻿<template>
    <el-col :sm="24" :md="pzoption.mdwidth" v-show="ishide">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <el-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
            <el-input v-model="pzoption.value" style="display:none">
            </el-input>
            <div v-show="!childpro.disabled">
                <textarea :id="qjeditid" class="szhl_UEEDIT" v-model="pzoption.value" style="width:100%"></textarea>
            </div>
            <div class="disdiv" v-show="childpro.disabled" v-html="pzoption.value" >

            </div>
        </el-form-item>
        <el-dialog title="组件属性" :visible.sync="dialogInputVisible">
            <el-form :model="childpro">

                <el-form-item label="占位符" style="display:none">
                    <el-input v-model="childpro.placeholder" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="必填">
                    <el-switch v-model="childpro.rules.required"></el-switch>
                </el-form-item>
                <el-form-item label="高度(px)">
                    <el-input-number v-model="childpro.height" :step="20" controls-position="right"></el-input-number>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-col>

</template>
<script>
    module.exports = {
        props: ['pzoption', 'index'],
        data: function () {
            return {
                dialogInputVisible: false,
                childpro: {
                    qjeditid: "",
                    placeholder: "编辑区域",
                    disabled: false,
                    hide: false,
                    readonly: false,
                    itemtype: "text",
                    height: 300,
                    rules: {
                        required: false, message: '不能为空', type: "string"
                    }
                }
            }
        },
        computed: {
            ishide() {
                return !this.childpro.hide || window.location.href.indexOf('FormBuildV1') > -1
            }
        },
        methods: {
            delWid: function (wigdetcode) {
                // 子组件中触发父组件方法ee并传值cc12345
                this.$root.nowwidget = {};
                var um = UE.getEditor(this.qjeditid);
                um.destroy();
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });

            },

            initedit: function () {
                var pro = this;
                var um = UE.getEditor(pro.qjeditid, {
                    toolbars: [
                        [
                            'source',
                            'bold', //加粗
                            'indent', //首行缩进
                            'italic', //斜体
                            'underline', //下划线
                            'strikethrough', //删除线
                            'preview', //预览
                            'horizontal', //分隔线
                            'removeformat', //清除格式
                            'deletecaption', //删除表格标题
                            'inserttitle', //插入标题
                            'deletetable', //删除表格
                            'cleardoc', //清空文档
                            'fontfamily', //字体
                            'fontsize', //字号
                            'paragraph', //段落格式
                            'simpleupload', //单图上传
                            'link', //超链接
                            'justifyleft', //居左对齐
                            'justifyright', //居右对齐
                            'justifycenter', //居中对齐
                            'justifyjustify', //两端对齐
                            'forecolor', //字体颜色
                            'backcolor', //背景色
                            'insertorderedlist', //有序列表
                            'insertunorderedlist', //无序列表
                            'fullscreen', //全屏
                            'rowspacingtop', //段前距
                            'rowspacingbottom', //段后距
                            'attachment', //附件
                            'imagecenter', //居中
                            'wordimage', //图片转存
                            'lineheight', //行间距
                            'edittip ', //编辑提示
                            'autotypeset', //自动排版
                            'touppercase', //字母大写
                            'tolowercase', //字母小写
                            'inserttable', //插入表格

                        ]
                    ]
                });
                um.ready(function () {

                    if (pro.pzoption.value != "") {
                        //需要ready后执行，否则可能报错
                        um.setContent(pro.pzoption.value);
                    }
                    um.setHeight(pro.pzoption.childpro.height);
                    if (pro.pzoption.childpro.disabled) {
                        um.setDisabled('preview');
                    } else {
                        um.setEnabled();
                    }
                })
                //um.addListener('contentChange', function () {
                //    pro.pzoption.value = um.getContent();
                //})
                um.addListener('blur', function () {
                    pro.pzoption.value = um.getContent();
                })

            }
        },
        created() {
            this.qjeditid = "edit" + this.pzoption.wigdetcode;
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                if (pro.$root.addchildwig) {
                    pro.$root.addchildwig();
                }
                if (pro.pzoption.childpro.placeholder) {
                    pro.childpro = pro.pzoption.childpro;
                } else {
                    pro.pzoption.mdwidth = 24;
                    pro.pzoption.childpro = pro.childpro;
                }
                pro.initedit();
            })

        },
        watch: {
            'pzoption.value': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {
                        var pro = this;
                        var um = UE.getEditor(pro.qjeditid);
                        um.setContent(newV);
                    }
                },
                deep: true
            },
            "childpro.disabled": {
                handler(newV, oldV) {
                    var um = UE.getEditor(this.qjeditid);
                    if (um.id) {
                        if (newV) {
                            um.setDisabled();
                        } else {
                            um.setEnabled();
                        }
                    }

                },
                deep: true,
            },
            "childpro.height": {
                handler(newV, oldV) {
                    var um = UE.getEditor(this.qjeditid);
                    if (newV && um.isReady) {
                        um.setHeight(newV);
                    }

                },
                deep: true
            }
        }
    };
</script>